<template>
  <div class="container-main">
    <h3>用户管理</h3>
    <table style="width: 100%;" border="1">
      <thead>
        <tr>
          <th>#</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>头衔</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in tableData" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.title }}</td>
          <td><router-link :to="'/home/user/' + id">详情</router-link></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: ['id'],
  data() {
    return {
      tableData: []
    }
  },
  mounted() {
    this.$http({
      method: 'get',
      url: 'getTableList',
    }).then(res => {
      // console.log(res.data)
      if(res.data.status === 200) {
        this.tableData = res.data.queryData
      }
    })
  }
}
</script>

<style>
  tr {
    height: 60px;
  }
</style>